<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>

</head>

<body>

    <div class="box">
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
    </div>
    <button class="btn1">上滑</button>
    <button class="btn2">下滑</button>




    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        // 点击.btn1向上滑动 
        $('.btn1').on('click', function() {
            $('.box').slideUp();
        })


        // 点击.btn2向下滑动
        $('.btn2').on('click', function() {
            $('.box').slideDown();
        })
    </script>
</body>

</html>